<template>
  <div class="block user_edit">
    <div class="block-title">
      <div class="block-options pull-right">
        <a href="javascript:void(0)" class="btn btn-effect-ripple btn-default toggle-bordered enable-tooltip"
           data-toggle="button" title="Toggles .form-bordered class" @click="returnBack">返回列表</a>
      </div>
      <h2>修改管理员</h2>
    </div>
    <form action="" method="post" class="form-horizontal form-bordered">
      <div class="form-group">
        <label class="col-sm-3 control-label"
               for="example-input-name">账号</label>
        <div class="col-sm-4">
          <input type="text" v-model.trim="Info.name"
                 id="example-input-name" name="example-input-small"
                 class="form-control input-sm" placeholder="请填写账号..." @input="$v.Info.name.$touch();">
          <span v-if="!$v.Info.name.required &&  Info.name!=''">请填账号</span>
          <span v-if="!$v.Info.name.minLength && Info.name!=''">抱歉账号必须5位</span>
        </div>
      </div>
      <div class="form-group">
        <label class="col-sm-3 control-label"
               for="example-input-nickname">昵称</label>
        <div class="col-sm-4">
          <input type="text" v-model.trim="Info.nickname"
                 id="example-input-nickname" name="example-input-small"
                 class="form-control input-sm" placeholder="请填写昵称..." @input="$v.Info.nickname.$touch();">
          <span v-if="!$v.Info.nickname.required &&  Info.nickname!=''">请填昵称</span>
          <span v-if="!$v.Info.nickname.minLength && Info.nickname!=''">抱歉昵称必须5位</span>
        </div>
      </div>
      <div class="form-group">
        <label class="col-sm-3 control-label"
               for="example-input-email">邮箱</label>
        <div class="col-sm-4">
          <input type="text" v-model.trim="Info.email"
                 id="example-input-email" name="example-input-small"
                 class="form-control input-sm" placeholder="请填写邮箱..." @input="$v.Info.email.$touch();">
          <span v-if="!$v.Info.email.required &&  Info.email!=''">请填邮箱</span>
          <span v-if="!$v.Info.email.minLength && Info.email!=''">抱歉邮箱必须5位</span>
        </div>
      </div>
      <div class="form-group">
        <label class="col-sm-3 control-label"
               for="example-input-password">登录密码</label>
        <div class="col-sm-4">
          <input type="password" v-model.trim="Info.password"
                 id="example-input-password" name="example-input-small"
                 class="form-control input-sm" placeholder="请填写登录密码..." @input="$v.Info.password.$touch();">
          <span v-if="!$v.Info.password.required &&  Info.password!=''">请填登录密码</span>
          <span v-if="!$v.Info.password.minLength && Info.password!=''">抱歉登录密码必须5位</span>
        </div>
      </div>
      <div class="form-group">
        <label class="col-md-3 control-label"
               for="example-textarea-input">描述</label>

        <div class="col-md-9">
                    <textarea id="example-textarea-input" v-model.trim="Info.intro"
                              name="example-textarea-input" rows="7" class="form-control"
                              placeholder="请填写描述..." @input="$v.Info.intro.$touch();"></textarea>
          <span v-if="!$v.Info.intro.required && Info.intro!=''">请填描述</span>
          <span v-if="!$v.Info.intro.minLength && Info.intro!=''">抱歉描述必须5位</span>
        </div>
      </div>
      <div class="form-group">
        <label class="col-md-3 control-label">是否禁用</label>
        <div class="col-md-9">
          <label class="radio-inline" for="example-inline-radio1">
            <input type="radio"
                   id="example-inline-radio1" v-model="Info.status"
                   value="1" name="example-inline-radios">启用                    </label>
          <label class="radio-inline" for="example-inline-radio2">
            <input type="radio"
                   id="example-inline-radio2" v-model="Info.status"
                   value="0" name="example-inline-radios">禁用                    </label>
        </div>
      </div>
      <div class="form-group">
        <label class="col-md-3 control-label">爱好</label>

        <div class="col-md-9">
          <label class="checkbox-inline" for="example-inline-checkbox1">
            <input type="checkbox" id="example-inline-checkbox1"
                   name="example-inline-checkbox1" v-model="Info.hobby"
                   value="1"> 篮球                    </label>
          <label class="checkbox-inline" for="example-inline-checkbox2">
            <input type="checkbox" id="example-inline-checkbox2"
                   name="example-inline-checkbox1" v-model="Info.hobby"
                   value="2"> 足球                    </label>
        </div>
      </div>
      <div class="form-group">
        <label for="select_group" class="col-md-3 control-label">所属组</label>
        <div class="col-md-4">
          <select class="form-control" id="select_group" v-model="Info.group">
            <option value="">请选择所属组</option>
            <option value="1">经理组</option>
            <option value="2">员工组</option>
            <option value="3">编辑组</option>
            <option value="4">草泥马组</option>
          </select>
        </div>
      </div>
      <div class="form-group form-actions">
        <div class="col-sm-9 col-sm-offset-3">
          <button type="button" class="btn btn-effect-ripple btn-primary" @click="update_data($v.Info)">管理员修改</button>
        </div>
      </div>
    </form>
    <transition name="loading" mode="out-in">
      <loading v-if="loadAt"></loading>
    </transition>
  </div>
</template>
<script type="text/ecmascript-6">
  import http from '../../static/http/http';
  import {mapState, mapMutations} from 'vuex'
  import {required, minLength, between, email} from 'vuelidate/lib/validators'
  import loading    from '../../components/comment/loading/loading';
  const ERROR_STATUS = 1001;
  export default{
    name: "user_edit",
    props: {
      userInfo: {type: Object, required}
    },
    data(){
      return {
        Info: {
          name: '', nickname: '', email: '', password: '', intro: '', hobby: [], group: '',
        }
      }
    }, created(){
      this.Info = {...this.userInfo}
    },
    validations: {
      Info: {
        name: {required, minLength: minLength(6)},
        nickname: {required, minLength: minLength(6)},
        email: {required, minLength: minLength(6)},
        password: {required, minLength: minLength(6)},
        intro: {required, minLength: minLength(6)},
        status: {required, minLength: minLength(6)},
        hobby: {required, minLength: minLength(6)},
        group: {required, minLength: minLength(6)},
      }
    }, computed: {
      ...mapState({
        loadAt: 'loading'
      })
    }, methods: {
      ...mapMutations({
        set_loadAt: 'set_loading'
      }), update_data(validate){
        validate.$touch();  //  全面验证
        if (validate.$error) {
          return false;
        }// 验证成功位false验证失败为true false才能进行下一步的验证
        this.set_loadAt({code: 100, meta: true});
        let data = {};
        let id = this.$route.params.id;
        data.name = this.Info.name, data.nickname = this.Info.nickname, data.email = this.Info.email, data.password = this.Info.password,
          data.intro = this.Info.intro, data.status = this.Info.status, data.hobby = this.Info.hobby, data.group = this.Info.group,
          this.apiPut(`/api/admin/user/update/id/${id}`, data).then((response) => {
            let response_data = response.data.list;
            let error_code = response.data.status;
            if (error_code !== ERROR_STATUS) {
              this.changeInfo();
              this.set_loadAt({code: 120, meta: false, custom_info: response.data.info});
            }
          }).catch((response) => {
            this.set_loadAt({code: 102, meta: false});
          })
      }, returnBack(){
        this.$emit('CloseEdit')
      }, changeInfo(){
        let keys = Object.keys(this.Info);
        keys.forEach(index => this.$set(this.userInfo, index, this.Info[index]));
      }
    }, mixins: [http],
    components: {loading}
  }
</script>
<style type="stylus" scoped>
  .loading-enter-active, .loading-leave-active {
    transition: all .4s;
  }

  .loading-enter, .loading-leave-active {
    transform: translate3d(2rem, 0, 0);
    opacity: 0;
  }

  .block {
    position: fixed;
    top: 50px;
    left: 220px;
    z-index: 100;
    right: 0;

  }
</style>
